<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运维管理系统 - 登录</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #3498db;
            --secondary: #2c3e50;
            --success: #27ae60;
            --warning: #f39c12;
            --danger: #e74c3c;
            --light: #ecf0f1;
            --dark: #34495e;
            --gray: #95a5a6;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: #333;
            overflow: hidden;
        }

        @keyframes gradientBG {
            0% { background-position: 0% 50% }
            50% { background-position: 100% 50% }
            100% { background-position: 0% 50% }
        }

        .login-container {
            display: flex;
            width: 90%;
            max-width: 1000px;
            height: 800px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            position: relative;
            z-index: 2;
        }

        .left-panel {
            flex: 1;
            background: linear-gradient(to bottom right, var(--secondary), var(--primary));
            color: white;
            padding: 50px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .left-panel::before {
            content: "";
            position: absolute;
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
        }

        .left-panel::after {
            content: "";
            position: absolute;
            bottom: -80px;
            left: -30px;
            width: 250px;
            height: 250px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
        }

        .brand {
            position: relative;
            z-index: 2;
            margin-bottom: 40px;
            text-align: center;
        }

        .logo {
            width: 80px;
            height: 80px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .logo i {
            font-size: 40px;
            color: var(--primary);
        }

        .brand h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .brand p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .features {
            position: relative;
            z-index: 2;
            margin-top: 40px;
        }

        .feature {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
        }

        .feature i {
            font-size: 1.5rem;
            color: var(--success);
            min-width: 40px;
        }

        .feature-text h3 {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

        .feature-text p {
            opacity: 0.85;
        }

        .right-panel {
            flex: 1;
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .login-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .login-header h2 {
            font-size: 2rem;
            color: var(--dark);
            margin-bottom: 10px;
        }

        .login-header p {
            color: var(--gray);
        }

        .login-form {
            width: 100%;
        }

        .form-group {
            margin-bottom: 25px;
            position: relative;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark);
        }

        .input-with-icon {
            position: relative;
        }

        .input-with-icon i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
        }

        .form-control {
            width: 100%;
            padding: 15px 15px 15px 50px;
            border: 2px solid #e0e6ed;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s;
        }

        .form-control:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }

        .remember {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .remember input {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .forgot-password {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
        }

        .forgot-password:hover {
            text-decoration: underline;
        }

        .btn-login {
            background: linear-gradient(to right, var(--primary), var(--secondary));
            color: white;
            border: none;
            border-radius: 8px;
            padding: 15px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            transition: all 0.3s;
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }

        .btn-login::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: 0.5s;
        }

        .btn-login:hover::before {
            left: 100%;
        }

        .btn-login:hover {
            transform: translateY(-3px);
            box-shadow: 0 7px 15px rgba(52, 152, 219, 0.4);
        }

        .result-message {
            text-align: center;
            margin-top: 15px;
            min-height: 25px;
            transition: all 0.3s;
        }

        .success-message {
            color: var(--success);
            font-weight: 500;
        }

        .error-message {
            color: var(--danger);
            font-weight: 500;
        }

        .demo-accounts {
            background: var(--light);
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            text-align: center;
        }

        .demo-accounts h4 {
            margin-bottom: 10px;
            color: var(--dark);
        }

        .account {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #ddd;
        }

        .account:last-child {
            border-bottom: none;
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animated {
            animation: fadeIn 0.6s ease-out forwards;
        }

        .delay-1 {
            animation-delay: 0.1s;
        }

        .delay-2 {
            animation-delay: 0.2s;
        }

        .delay-3 {
            animation-delay: 0.3s;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .login-container {
                flex-direction: column;
                height: auto;
                max-width: 500px;
            }

            .left-panel {
                padding: 30px;
            }

            .right-panel {
                padding: 30px;
            }
        }

        @media (max-width: 480px) {
            .login-container {
                width: 95%;
            }

            .left-panel, .right-panel {
                padding: 25px;
            }

            .remember-forgot {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
        }

        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body>
    <!-- 背景粒子 -->
    <div class="particles" id="particles"></div>

    <div class="login-container">
        <!-- 左侧品牌信息面板 -->
        <div class="left-panel">
            <div class="brand">
                <div class="logo">
                    <i class="fas fa-server"></i>
                </div>
                <h1>运维管理系统</h1>
                <p>专业、高效、安全的IT基础设施管理</p>
            </div>

            <div class="features">
                <div class="feature animated">
                    <i class="fas fa-shield-alt"></i>
                    <div class="feature-text">
                        <h3>安全保障</h3>
                        <p>企业级安全防护，保障系统安全</p>
                    </div>
                </div>

                <div class="feature animated delay-1">
                    <i class="fas fa-tachometer-alt"></i>
                    <div class="feature-text">
                        <h3>性能监控</h3>
                        <p>实时监控主机性能，及时发现问题</p>
                    </div>
                </div>

                <div class="feature animated delay-2">
                    <i class="fas fa-cogs"></i>
                    <div class="feature-text">
                        <h3>自动化运维</h3>
                        <p>简化运维流程，提高工作效率</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧登录表单 -->
        <div class="right-panel">
            <div class="login-header animated">
                <h2>欢迎登录</h2>
                <p>请使用您的账号登录系统</p>
            </div>

            <form class="login-form">
                <div class="form-group animated delay-1">
                    <label for="username">用户名</label>
                    <div class="input-with-icon">
                        <i class="fas fa-user"></i>
                        <input type="text" id="username" class="form-control" placeholder="请输入用户名" value="admin">
                    </div>
                </div>

                <div class="form-group animated delay-2">
                    <label for="password">密码</label>
                    <div class="input-with-icon">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="password" class="form-control" placeholder="请输入密码" value="adminpass">
                    </div>
                </div>

                <div class="remember-forgot animated delay-2">
                    <div class="remember">
                        <input type="checkbox" id="remember">
                        <label for="remember">记住我</label>
                    </div>
                    <a href="#" class="forgot-password">忘记密码?</a>
                </div>

                <button type="button" class="btn-login animated delay-3" onclick="login()">
                    <i class="fas fa-sign-in-alt"></i> 登录系统
                </button>

                <div class="result-message" id="result-message"></div>

                <div class="demo-accounts animated delay-3">
                    <h4>演示账号</h4>
                    <div class="account">
                        <span>管理员</span>
                        <span>admin / adminpass</span>
                    </div>
                    <div class="account">
                        <span>操作员</span>
                        <span>operator / operatorpass</span>
                    </div>
                    <div class="account">
                        <span>查看者</span>
                        <span>viewer / viewerpass</span>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        // 创建背景粒子
        function createParticles() {
            const container = document.getElementById('particles');
            const particleCount = 30;

            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');

                // 随机属性
                const size = Math.random() * 20 + 5;
                const posX = Math.random() * 100;
                const posY = Math.random() * 100;
                const animationDuration = Math.random() * 20 + 10;
                const animationDelay = Math.random() * 5;
                const opacity = Math.random() * 0.5 + 0.1;

                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.left = `${posX}%`;
                particle.style.top = `${posY}%`;
                particle.style.opacity = opacity;
                particle.style.animation = `float ${animationDuration}s ease-in-out ${animationDelay}s infinite`;

                container.appendChild(particle);
            }
        }

        // 登录函数
        async function login() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const resultMessage = document.getElementById('result-message');

            // 清除之前的消息
            resultMessage.innerHTML = '';
            resultMessage.className = 'result-message';

            // 显示加载状态
            resultMessage.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 正在登录...';

            try {
                const response = await fetch('/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username, password })
                });

                const data = await response.json();

                if (response.ok) {
                    // 登录成功
                    resultMessage.innerHTML = '<div class="success-message"><i class="fas fa-check-circle"></i> 登录成功，正在跳转...</div>';

                    // 显示成功信息后跳转
                    setTimeout(() => {
                        window.location.href = data.redirect;
                    }, 1500);
                } else {
                    // 登录失败
                    resultMessage.innerHTML = `<div class="error-message"><i class="fas fa-exclamation-circle"></i> ${data.error || '登录失败'}</div>`;
                }
            } catch (error) {
                console.error('登录失败:', error);
                resultMessage.innerHTML = `<div class="error-message"><i class="fas fa-exclamation-circle"></i> 网络错误: ${error.message}</div>`;
            }
        }

        // 按Enter键登录
        document.addEventListener('DOMContentLoaded', function() {
            createParticles();

            document.getElementById('password').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    login();
                }
            });
        });
    </script>
</body>
</html>